<template>
 <!-- 活动入口 -->
  <div class="active-content">
		<div class="activity-wrap">
      <div class="top-contet">
        <img src="/static/home/bj5.png" alt="" class="bg">
        <div class="conten-box">
          <div class="left-content">
            <div class="h1">
              中秋钜惠 好礼相送
            </div>
            <div class="tips">
              先抢先送
            </div>
            <div class="btn">
              点击查看
            </div>
          </div>
          <div class="right-content">
            <img src="/static/home/ui4.png" alt="">
          </div>
        </div>
      </div>
      <div class="bottom-content">
        <div class="left-content-wrap">
          <img src="/static/home/bj5.png" alt="" class="bg">
          <div class="conten-box">
            <div class="bottom-left-content">
              <div class="h1" style="color: #f65353;">
              美妆大作战
              </div>
              <div class="tips">
                限时热卖
              </div>
              <div class="btn" style="background: #9b60c6;">
                点击查看
              </div>
            </div>
            <div class="bottom-right-content">
              <img src="/static/home/ui1.png" alt="" >
            </div>
          </div>
        </div>
        <div class="left-content-wrap">
          <img src="/static/home/bj3.png" alt="" class="bg">
          <div class="conten-box">
            <div class="bottom-left-content">
              <div class="h1" style="color: #f65353;">
                立减300
              </div>
              <div class="tips">
                限时热卖
              </div>
              <div class="btn" style="background: #f65353;">
                点击查看
              </div>
            </div>
            <div class="bottom-right-content">
              <img src="/static/home/ui2.png" alt="" style="width: 67px;">
            </div>
          </div>

        </div>
      </div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'RubikCubeStyle2',
  data() {
    return {
    
    }
  },
  computed: {
    
  },
  mounted() {
    
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  // 活动入口
  .active-content {
    background: #fff;
    text-align: left;
    .activity-wrap {
      width: 358px;
      margin: 0 auto;
      padding: 10px 0 10px;
      .top-contet {
        position: relative;
        height: 100px;
        border-radius: 6px;
        &>img {
          width: 100%;
          height: 100%;
        }
        .conten-box {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          padding: 0 25px;
          justify-content: space-between;
          .left-content {
            .h1 {
              font-size: 18px;
              color: #50a4d1;
              font-weight: 700;
            }
            .tips {
              font-size: 12px;
              color: #000;
              margin: 6px 0;
            }
            .btn {
              width: 58px;
              height: 18px;
              background: #619ebf;
              border-radius: 18px;
              color: #fff;
              font-size: 12px;
              font-weight: 700;
              line-height: 18px;
              text-align: center;
            }
          }
          .right-content {
            img {
              width: 132px;
            }
          }
        }


      }
      .bottom-content {
        display: flex;
        align-items: center;
        margin-top: 9px;
        .left-content-wrap {
          &:first-child {
            margin-right: 10px;
          }
          flex: 1;
          position: relative;
          height: 100px;
          border-radius: 6px;
          &>img {
            width: 100%;
            height: 100%;
          }
          .conten-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 12px;
            justify-content: space-between;
            .bottom-left-content{
              .h1 {
                font-size: 16px;
                color: #50a4d1;
                font-weight: 700;
              }
              .tips {
                font-size: 12px;
                color: #000;
                margin: 6px 0;
              }
              .btn {
                width: 58px;
                height: 18px;
                background: #619ebf;
                border-radius: 18px;
                color: #fff;
                font-size: 12px;
                font-weight: 700;
                line-height: 18px;
                text-align: center;
              }
            }
            .bottom-right-content {
              img {
                width: 88px;
                position: absolute;
                right: 9px;
                bottom: 11px;
              }
            }
          }
        }
       
       
      }
    }
  }
  
</style>